<template>
	<view class="main">
		<header-vue :back="true" title="我的合同"></header-vue>
		<view class="flex search-box margin32">
			<i class="iconfont icon-search font40"></i>
			<input placeholder="搜索文件名称" class="font28 input"/>
		</view>
		<view v-for="item in 10" :key="item" class="flex between white-box margin32"
			@click="goPage('/views/mine/detail')">
			<view class="flex radio">
				<i class="iconfont icon-duihao" v-if="item.radio"></i>
			</view>
			<view style="flex: 1;margin-left: 32rpx;">
				<view class="flex start font28 fontbold-500">
					<image src="/static/mine/agree-icon.png" mode="aspectFit"
						style="width: 36rpx;height: 40rpx;margin-right: 8rpx;"></image>
					<view>月嫂包吃住一个月合同.pdf</view>
				</view>
				<view class="font24">1.2M 2025-06-11 14:22</view>
			</view>
			<i class="iconfont icon-download font32"></i>
		</view>
	</view>
</template>

<script>
	import headerVue from '../../components/header.vue';

	export default {
		components: {
			headerVue
		},
		data() {
			return {}
		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: linear-gradient(180deg, #F3F6FC 0%, #FFFFFF 100%);
	}

	.margin32 {
		margin: 0 32rpx;
	}

	.white-box {
		background: $uni-bg-color;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		padding: 28rpx;
		box-sizing: border-box;
		margin-top: 28rpx;

		.font24 {
			color: #666666;
		}

		.font22 {
			color: #999999;
			margin-top: 16rpx;
			font-size: 22rpx;
		}
	}

	.radio {
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		border: 1rpx solid $uni-color-primary;
	}

	.active {
		color: $uni-text-color;

		.radio {
			background: $uni-color-primary;
			color: $uni-text-color-inverse;
		}
	}

	.icon-download {
		color: #0785CF;
	}

	.font24 {
		margin-top: 20rpx;
		color: #999999;
	}

	.search-box {
		height: 72rpx;
		background: $uni-bg-color;
		border-radius: 60rpx;
		padding: 0 28rpx;
		margin-top: 28rpx;

		.iconfont {
			color: $uni-text-color-grey;
			margin-right: 20rpx;
		}

		.input {
			width: 100%;
			height: 100%;
			color: $uni-text-color-grey;
		}
	}
</style>